{extend name="base"/}
{block name="resources"}
<link rel="stylesheet" href="SHOP_SUPPLY_LOCAL_CSS/list.css">
{/block}
{block name="body"}
<div class="ns-supply-wrap">
	<div class="ns-supply-wrap-con">
		<!-- 顶部html文件-->
		{include file="addon/supply/shop/view/market_head.html"/}
		
		<div class="ns-supply-list">
			<!-- 分类面包屑 -->
			<div class="ns-supply-crumb">
				<span><a href="{:addon_url('supply://shop/market/index')}">首页</a></span>

				{if !empty($first_goods_category_list)}
				<i class="iconfont iconyoujiantou"></i>
				<div class="ns-cate-list">
					<div class="ns-cate-current">
						{if !empty($category_id_1)}
							{foreach $first_goods_category_list as $fir_k => $fir_v}
								{if $category_id_1 == $fir_v.category_id}
								<span>{$fir_v.category_name}</span>
								{/if}
							{/foreach}
						{else/}
						<span>所有类目</span>
						{/if}
						<i class="iconfont iconiconangledown-copy"></i>
						<i class="iconfont iconiconangledown"></i>
					</div>

					<div class="ns-cate-li">
						
						<span><a {if empty($category_id_1)} class="ns-text-color" {/if} href="{:addon_url('supply://shop/goods/goodslist')}">所有类目</a></span>
						
						{foreach $first_goods_category_list as $fir_k => $fir_v}
							<span>
								{if $category_id_1 == $fir_v.category_id}
								<a class="ns-text-color" href="{:addon_url('supply://shop/goods/goodslist')}?category_id={$fir_v.category_id}&&category_level={$fir_v.level}">{$fir_v.category_name}</a>
								{else/}
								<a href="{:addon_url('supply://shop/goods/goodslist')}?category_id={$fir_v.category_id}&&category_level={$fir_v.level}">{$fir_v.category_name}</a>
								{/if}
							</span>
						{/foreach}
					</div>
				</div>
				{/if}

				{if !empty($second_goods_category_list)}
				<i class="iconfont iconyoujiantou"></i>
				<div class="ns-cate-list">
					<div class="ns-cate-current">
						{if empty($category_id_2)}
						<span>全部</span>
						{/if}
						{foreach $second_goods_category_list as $sec_k => $sec_v}
							{if $category_id_2 == $sec_v.category_id}
							<span>{$sec_v.category_name}</span>
							{/if}
						{/foreach}
						<i class="iconfont iconiconangledown-copy"></i>
						<i class="iconfont iconiconangledown"></i>
					</div>

					<div class="ns-cate-li">
						
						<span><a {if empty($category_id_2)} class="ns-text-color" {/if} href="{:addon_url('supply://shop/goods/goodslist')}?category_id={$category_id_1}&&category_level=1">全部</a></span>
						
						{foreach $second_goods_category_list as $sec_k => $sec_v}
							<span>
								{if $category_id_2 == $sec_v.category_id}
								<a class="ns-text-color" href="{:addon_url('supply://shop/goods/goodslist')}?category_id={$sec_v.category_id}&&category_level={$sec_v.level}">{$sec_v.category_name}</a>
								{else/}
								<a href="{:addon_url('supply://shop/goods/goodslist')}?category_id={$sec_v.category_id}&&category_level={$sec_v.level}">{$sec_v.category_name}</a>
								{/if}
							</span>
						{/foreach}
					</div>
				</div>
				{/if}

				{if !empty($third_goods_category_list)}
				<i class="iconfont iconyoujiantou"></i>
				<div class="ns-cate-list">
					<div class="ns-cate-current">
						{if empty($category_id_3)}
						<span>全部</span>
						{/if}
						{foreach $third_goods_category_list as $third_k => $third_v}
							{if $category_id_3 == $third_v.category_id}
							<span>{$third_v.category_name}</span>
							{/if}
						{/foreach}
						<i class="iconfont iconiconangledown-copy"></i>
						<i class="iconfont iconiconangledown"></i>
					</div>

					<div class="ns-cate-li">
						<span><a {if empty($category_id_3)} class="ns-text-color" {/if} href="{:addon_url('supply://shop/goods/goodslist')}?category_id={$category_id_2}&&category_level=2">全部</a></span>

						{foreach $third_goods_category_list as $third_k => $third_v}
							<span>
								{if $category_id_3 == $third_v.category_id}
								<a class="ns-text-color" href="{:addon_url('supply://shop/goods/goodslist')}?category_id={$third_v.category_id}&&category_level={$third_v.level}">{$third_v.category_name}</a>
								{else/}
								<a href="{:addon_url('supply://shop/goods/goodslist')}?category_id={$third_v.category_id}&&category_level={$third_v.level}">{$third_v.category_name}</a>
								{/if}
							</span>
						{/foreach}
					</div>
				</div>
				{/if}
			</div>

			<!-- 筛选条件 -->
			<div class="ns-supply-goods-term">
				<ul class="ns-goods-term-list">
					<li class="ns-text-color">综合</li>
					<li data-name="sale_num">销量
						<div><span><i class="iconfont iconfold i-color"></i></span><span><i class="iconfont iconunfold i-color"></i></span></div>
						<input type="hidden" name="sale_num" value="desc" />
					</li>
					<li data-name="min_price">供货价
						<div><span><i class="iconfont iconfold i-color"></i></span><span><i class="iconfont iconunfold i-color"></i></span></div>
						<input type="hidden" name="min_price" value="desc" />
					</li>
					<li data-name="create_time">上架时间
						<div><span><i class="iconfont iconfold i-color"></i></span><span><i class="iconfont iconunfold i-color"></i></span></div>
						<input type="hidden" name="create_time" value="desc" />
					</li>
					<div></div>
				</ul>
				<div class="ns-goods-term-form">
					<div class="layui-inline ns-goods-price-range">
						<label class="layui-form-label">供货价：</label>
						<div class="layui-input-inline">
							<span>￥</span>
							<input type="text" autocomplete="off" class="layui-input supply-min-price">
						</div>
						<div class="layui-form-mid">-</div>
						<div class="layui-input-inline">
							<span>￥</span>
							<input type="text" autocomplete="off" class="layui-input supply-max-price">
						</div>

						<button class="layui-btn layui-btn-primary">确定</button>
					</div>

					<div class="ns-goods-service layui-form">
						<input type="checkbox" name="is_free_shipping" title="包邮" lay-skin="primary" lay-filter="is_free_shipping">
					</div>
				</div>
			</div>

			<!-- 商品列表 -->
			<div class="ns-goods-list">

			</div>

			<input type="hidden" class="goods-category-id" value="{$category_id}" />
			<input type="hidden" class="goods-category-level" value="{$category_level}" />
			<input type="hidden" class="search-keyword" value="{$keyword}" />

			<!-- 分页 -->
			<div id="list_page"></div>
		</div>
	</div>
</div>

<script type="text/html" id="goodsList">
	{{#  layui.each(d.list, function(index, item){ }}
		<div class="ns-goods-li">
			<a href="#" onclick="toGoodsDetail({{ item.sku_id }})">
				<div class="ns-goods-img">
					<img src="{{ ns.img(item.sku_image.split(',')[0]) }}" onerror="this.src = 'SHOP_SUPPLY_LOCAL_IMG/default_goods.png' " />
					<!-- <p class="hover-content">未添加（未合作供货商）</p> -->
				</div>
			</a>
			<a href="#" onclick="toGoodsDetail({{ item.sku_id }})">
				<p class="ns-goods-name ns-multi-line-hiding" title="{{ item.sku_name }}">{{ item.sku_name }}</p>
			</a>
			<div class="ns-goods-info">
				<p>
					<span>供货价：</span>
					{{#  if(item.max_price == item.min_price) {  }}
					<span class="ns-goods-profit ns-red-color">￥{{ item.max_price }}</span>
					{{#  } else if(item.max_price != item.min_price) {  }}
					<!-- <span class="ns-goods-profit ns-red-color">￥{{ item.min_price }}~￥{{ item.max_price }}</span> -->
					<span class="ns-goods-profit ns-red-color">￥{{ item.min_price }}</span>
					{{#  }  }}
				</p>
				<p><span>库存：</span><span>{{ item.stock }}</span></p>
				<p class="ns-goods-sale"><span class="sale-label">销量</span>&nbsp;<span class="sale-num">{{ item.sale_num }}</span></p>
			</div>
		</div>
	{{#  }); }}
</script>
{/block}

{block name="script"}
<script>
	var sale_num, // 销量
		min_price, // 供应价最低价格
		create_time, // 商品上架时间
		order, // 销量/供应价/商品上架时间
		sort, // 正序asc/倒序desc
		form, 
		keyword = $(".search-keyword").val(), // 搜索框内容
		laypage, 
		laytpl, 
		list_count = 0, // 商品总数
		limit = 20, // 每页商品数
		curr = 1, // 当前页
		range_min, // 供应价最低价
		range_max, // 供应价最高价
		is_free_shipping; // 包邮

	$(".ns-goods-term-list li").click(function() { // 点击改变排序
		if ($(this).hasClass("ns-text-color")) {
			if ($(this).find("input").val() == "desc") {
				$(this).find("input").val("asc");
				$(this).find("i.iconfold").removeClass("i-color");
				$(this).find("i.iconunfold").addClass("i-color");
			} else {
				$(this).find("input").val("desc");
				$(this).find("i.iconfold").addClass("i-color");
				$(this).find("i.iconunfold").removeClass("i-color");
			}
		} else {
			$(this).find("input").val("desc");
			$(this).addClass("ns-text-color");
			$(this).siblings().removeClass("ns-text-color");
			$(this).find("i.iconfold").addClass("i-color");
			$(this).find("i.iconunfold").removeClass("i-color");
		}

		var attr = $(this).attr("data-name");

		if (attr == "sale_num") { // 销量
			order = "sale_num";
			sort = $("input[name='sale_num']").val();
		} else if (attr == "min_price") { // 供货价最低价
			order = "min_price";
			sort = $("input[name='min_price']").val();
		} else if (attr == "create_time") { // 商品创建时间
			order = "create_time";
			sort = $("input[name='create_time']").val();
		}

		goodsList();
	});

	$("input[name='keyword']").val(keyword);

	// $(".ns-goods-term-form .layui-inline input").focus(function() {
	// 	$(this).parents(".layui-inline").find("button").removeClass("layui-hide");
	// })

	// var isClick = false;
	$(".ns-goods-price-range button").mousedown(function() {
		// isClick = true;
		range_min = Number($(".supply-min-price").val());
		range_max = Number($(".supply-max-price").val());
		if (range_min < 0 || range_max < 0) {
			layer.msg("供货价最低为0");
			return false;
		}
		
		if (range_min > range_max) {
			layer.msg("供货价范围最高价不能小于最低价");
			$(".supply-max-price").val("");
			return false;
		}
		
		if (range_min * 100 % 1 != 0) {
			layer.msg("价格最多可保留两位小数");
			$(".supply-min-price").val("");
			return false;
		}
		
		if (range_max * 100 % 1 != 0) {
			layer.msg("价格最多可保留两位小数");
			$(".supply-max-price").val("");
			return false;
		}

		goodsList();
		// $(this).parents(".layui-inline").find("button").addClass("layui-hide");
	});

	// if (!isClick) {
	// 	$(".ns-goods-term-form .layui-inline input").blur(function() {
	// 		$(this).parents(".layui-inline").find("button").addClass("layui-hide");
	// 	})
	// }

	layui.use(['form', 'laypage', 'laytpl'], function() {
		form = layui.form;
		laypage = layui.laypage;
		laytpl = layui.laytpl;
		form.render();

		goodsList(); // 初始化
		pageList(list_count);

		// 监听复选框(包邮)
		form.on('checkbox(is_free_shipping)', function(data) {
			if (data.elem.checked) {
				is_free_shipping = 1;
			} else {
				is_free_shipping = undefined;
			}
			goodsList();
		});
	});

	function goodsList() {
		$(".ns-goods-list").empty();
		$.ajax({
			url: ns.url("supply://shop/goods/goodslist"),
			data: {
				"page": curr,
				"page_size": limit,
				"category_id": $(".goods-category-id").val(),
				"category_level": $(".goods-category-level").val(),
				"order": order,
				"sort": sort,
				"min_price": range_min,
				"max_price": range_max,
				"is_free_shipping": is_free_shipping,
				"keyword": $(".search-keyword").val()
			},
			async: false,
			dataType: 'JSON',
			type: 'POST',
			success: function(res) {
				list_count = res.data.count;

				if (res.data.list.length == 0) {
					var html = '<div class="empty-null"><p><i class="layui-icon layui-icon-tabs"></i></p><p>暂无商品</p></div>';
					$(".ns-goods-list").html(html);
				} else {
					laytpl($("#goodsList").html()).render(res.data, function(html) {
						$(".ns-goods-list").append(html)
					});
				}
			}
		});
	}

	function pageList(count) {
		if (!count) return false;
		page = new Page({
			elem: 'list_page',
			count: count,
			limit: limit,
			curr: curr,
			callback: function(obj) {
				goodsList();
			}
		});
	}

	function toGoodsDetail(id) {
		location.href = ns.url("supply://shop/goods/detail", {
			"sku_id": id
		});
	}
</script>
{/block}
